<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>帮创传媒</title>
		<link rel="stylesheet" type="text/css" href="./css/media.css"/>
	</head>
	<body class="warps_bg">
		<div class="regiset_warps">
			<img class="logos" src="image/logo.png" >
			<div class="text_log">注册帮创传媒账号</div>
			<div class="text_share f f_align_center f_center">邀请码：<p id="codes">--</p></div>
			<input maxlength="11" id="tal" class="login_input tal" placeholder="请输入手机号" type="number" />
			<div class="login_input pw f f_align f_align_center">
				<input id="vercode" placeholder="验证码" type="number" />
				<div maxlength="6" id="btnCode" class="verCode f f_align_center f_center">获取验证码</div>
			</div>
			
			<input id="password" class="login_input safe" placeholder="设置新密码" type="password" />
			<input id="newPassword" class="login_input safe" placeholder="确认密码" type="password" />
			
			<div class="login_btn f f_align_center f_center">立即注册</div>
			
			<div class="btn_text f f_align_center f_center">注册即代表同意《用户服务协议》</div>
		</div>
		
		<!----->
		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="js/layer/layer.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var downUrl = 'https://www.baidu.com/';
				var baseUrl = 'http://39.106.28.24:8081';
				var seconds = 300;
				//检查邀请码哦
				let params = getParams();
				if(params.code && params.code != ''){
					$('#codes').text(params.code);
				}else{
					layer.msg("获取邀请码失败，请检查分享链接！");
				}
				//阻止微信下载
				$('#download').click(function(){
					var ua = navigator.userAgent.toLowerCase();
					if(ua.match(/MicroMessenger/i) == 'micromessenger'){
					 //微信浏览器
					 layer.msg('请点击微信右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可下载', {offset: 't',time: 10000, anim: 6});
					}else{
						window.location.href = downUrl;
					}
				});
				//发送验证码
				$('#btnCode').click(function() {
					if ($('#btnCode').hasClass('disabled')) {
						return
					}
					if ($('#tal').val().length !=11) {
						layer.msg('请输入11位手机号码');
						return;
					}
					seconds = 300;
					$.ajax({
						url :baseUrl+'/api/unAuth/getSmsCaptcha',
						type:'post',
						data:$('#tal').val(),
						contentType: "application/json;charset=utf-8",
						dataType:'json',
						success:function (res) {
							layer.msg(res.msg);
							if(res.code == 0){
								varcode();
							}
						},
						error(err){
							layer.msg("网络似乎开小差");
							return;
						}
					});
				});
				//登录哦
				$('.login_btn').click(function(){
					var phone = $('#tal').val();
					var vercode = $('#vercode').val();
					var password = $('#password').val();
					var newPassword = $('#newPassword').val();
					
					
					
					layer.msg('请先同意注册协议哦');
				});
				//验证码倒计时
				function varcode(){
					seconds--;
				    if (seconds > 0) {
				        $('#btnCode').html(seconds + '秒后重发').addClass('disabled').attr('disabled', 'disabled');
				        setTimeout(function() {
							varcode()
						},1000)
				    } else {
				        $('#btnCode').html('获取验证码').removeClass('disabled').removeAttr('disabled')
				    }
				}
				function showbox(msg,url=''){
					$("body").append("<div class='tchint'>"+msg+"</div>");
					window.setTimeout("$('.tchint').hide()",3000);
					if(url !=''){
						window.location.href=url;
					}
					return false;
				}
				//获取注册协议
				function xyBooks(){
					$.ajax({
						url :baseUrl+'/api/unAuth/agreement/getAgreement/10010001',
						type:'get',
						data:'',
						success:function (res) {
							if(res.code == 0){
								$('#xyBooks').html(res.data.agreementContext);
							}else{
								layer.msg(res.msg);
							}
						},
						error(err){
							layer.msg("网络似乎开小差");
						}
					});
				}
				
				//获取参数哦
				function getParams(){
					var url = window.location.search;
					let params = {};
					if(url != ''){
						var keywords = window.location.search.substr(1);
						var result = keywords.replace(/&/g, '","').replace(/=/g, '":"');
						var reqDataString = '{"' + result + '"}';
						
						params = JSON.parse(reqDataString); 
					}
					return params;
				}
			})
		</script>
	</body>
</html>


<style type="text/css">
	.tchint{
		position: fixed;
		top: 30%;
		left: 50%;
		z-index: 999;
		margin-left: -3rem;
		padding: .4rem;
		font-size: .2rem;
		text-align: center;
		border-radius: 10px;
		box-sizing: border-box;
		background-color: rgba(0,0,0,.7);
		color:#fff;
		width: 6rem;
		animation: tchint .2s;
	}
	html{
		background-color: #2989FD;
		color: #333;
		padding-bottom: 60px;
	}
	input{border: none;}
	.warps_bg{
		width: 100%;
	}
	.regiset_warps{
		box-sizing: border-box;
		margin: 100px auto 0;
		background-color: #fff;
		width: 8.5rem;
		min-height: 10rem;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding: 1.5rem 0.6rem 0;
	}
	.regiset_warps .logos{
		width: 2rem;height: 2rem;
		border: solid 3px #fff;
		border-radius: 12px;
		position: absolute;
		top:-1rem;
	}
	.text_log{
		font-size: 14px;
	}
	.text_share{
		margin-top: 20px;
		font-size: 16px;
	}
	.text_share p{
		font-weight: bold;
		color: red;
	}
	.btn_text{
		width: 90%;
		background-color: #63A9FE;
		height: 1.1rem;
		border-radius: 0 0 10px 10px;
		font-size: 12px;
		color: #fff;
		position: absolute;
		bottom: -1.1rem;
	}
	.login_input{
		width: 100%;
		border: solid 1px #0984FF;
		border-radius: 20px;
		margin-top: 10px;
		height: 1rem;
		box-sizing: border-box;
		padding: 5px 5px 5px 40px;
	}
	.login_input .verCode{
		background-color: #0984FF;
		color: #fff;
		height: 0.7rem;
		font-size: 12px;
		width: 2rem;
		border-radius: 20px;
	}
	.login_input .verCode.disabled{
		background-color: #999;
	}
	.login_btn{
		width: 100%;
		background-color: #0984FF;
		height: 1.1rem;
		border-radius: 15px;
		font-size: 14px;
		border:none;
		margin-top: 20px;
		margin-bottom: 20px;
		color: #fff;
	}
	.login_input input{
		height: 100%;
	}
	.login_input input:focus,.login_input:focus{
		border-color: #0984FF;
	}
	.login_input.tal{
		background: url('./image/phone@2x.png') no-repeat 15px center;
		background-size: 13px 20px;
	}
	.login_input.pw{
		background: url('./image/pw@3x.png') no-repeat 15px center;
		background-size: 13px 18px;
	}
	.login_input.safe{
		background: url('./image/safe@2x.png') no-repeat 15px center;
		background-size: 14px 18px;
	}
	.login_input.gift{
		background: url('./image/share@2x.png') no-repeat 15px center;
		background-size: 14px 15px;
	}
</style>
